import React,{Fragment}from "react";
import  "./index.css";
class TypingBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dayWord:'',
      sIndex:0,
      timer:null
    };
    
  }
  componentDidMount(){
    this.handleTyping(this.props.msg)
  }
  handleTyping=(str)=>{
    if (this.state.sIndex<str.length) {
      let timer=null
      timer=setTimeout(() => {
        this.setState({
          dayWord:str.slice(0, this.state.sIndex+1)+"_",
          sIndex:this.state.sIndex+1,
          timer:timer
        })
        this.handleTyping(this.props.msg)
      }, 100);
    }else{
      clearTimeout(this.state.timer)
      this.setState({
        dayWord:str,
        sIndex:0,
        timer:null
      })
      setTimeout(() => {
        this.handleTyping(this.props.msg)
      }, 5000);
    }
  }
  render() {
    return (
      <Fragment>
        {this.state.dayWord}
      </Fragment>
    );
  }
}
export default TypingBox;
